<template>
  <div class="page-component">
    <h2>代码高亮显示</h2>
    <h3>1.安装</h3>
    <div v-highlight>
      <pre>
        <code>npm install highlight.js --save</code>
      </pre>
    </div>
    <h3>2.封装成vue插件</h3>
    <div v-highlight>
      <pre>
        <code>// src/utils/highlight.js 文件路径，纯属自定义

// highlight.js  代码高亮指令
import Hljs from 'highlight.js';
import 'highlight.js/styles/tomorrow-night.css'; // 代码高亮风格，选择更多风格需导入 node_modules/hightlight.js/styles/ 目录下其它css文件

let Highlight = {};
// 自定义插件
Highlight.install = function (Vue) {
    // 自定义指令 v-highlight
    Vue.directive('highlight', {
        // 被绑定元素插入父节点时调用
        inserted: function(el) {
            let blocks = el.querySelectorAll('pre code');
            for (let i = 0; i < blocks.length; i++) {
                Hljs.highlightBlock(blocks[i]);
            }
        },
        // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
        componentUpdated: function(el) {
            let blocks = el.querySelectorAll('pre code');
            for (let i = 0; i < blocks.length; i++) {
                Hljs.highlightBlock(blocks[i]);
            }
        }
    })
};

export default Highlight;</code>
      </pre>
    </div>
    <h3>3.全局引入自定义插件</h3>
    <p>在src/main.js中</p>
    <div v-highlight>
      <pre>
        <code>// highlight.js代码高亮插件
import Highlight from './utils/highlight'; // from 路径是highlight.js的路径，纯属自定义
Vue.use(Highlight);</code>
      </pre>
    </div>
    <h3>4.显示</h3>
    <p>如果是HTML标签代码,需要先把HTML转义一下</p>
    <p>code标签中的代码是字符串形式</p>
    <div v-highlight>
      <pre>
        <code>&lt;div id=&quot;codeView&quot; v-highlight&gt;
    &lt;pre&gt;&lt;code &gt;npm install highlight.js --save&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;</code>
      </pre>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'el_daimagaoliang'
  }
</script>

<style scoped>
</style>
